<template>
	<div class="input-group">
		<div class="input-group__item" v-for="(ipt, idx) of renderInputList" :key="idx">
			<el-input v-model.trim="ipt.value" :placeholder="ipt.placeholder" :maxlength="ipt.maxlength || INPUT_MAX_LENGTH"
				:disabled="ipt.disabled" @change="handleChange" @clear="handlerClear()"
				:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" />
			<ElIconfont v-if="ipt.raw" @click="add" :class="isDisabled ? 'ban' : 'add'" icon="circle-plus" width="24px" />
			<ElIconfont v-else @click="close(idx)" :class="isDisabled ? 'ban' : 'close'" icon="circle-close" width="24px" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, Ref, watch } from "vue";
import { PyInputGroupType } from ".";
import { constructInput, ConstructInputGroupType } from "./utils";
import { INPUT_MAX_LENGTH } from "@/components/page-box/config"
import { ElIconfont } from "@/components/ReIcon";
const props = defineProps<{
	modelValue: string;
	configure: PyInputGroupType;
}>();
const emits = defineEmits(["update:modelValue", "onChange"]);
const renderInputList: Ref<Partial<ConstructInputGroupType>[]> = ref([]);

const isDisabled = ref(props.configure.ban);

const handleChange = () => {
	const valueList = renderInputList.value.map(ipt => {
		ipt.value = ipt.value?.replaceAll(",", "");
		return ipt.value;
	});
	const val = valueList.filter(v => v).join(",");
	emits("onChange", val);
	emits("update:modelValue", val);
};

//Clear
const handlerClear = () => {
	props.configure.onClear && props.configure.onClear();
};

const add = () => {
	if (isDisabled.value) return;
	const { placeholder, disabled, maxCount = 5 } = props.configure;
	if (renderInputList.value.length >= maxCount) return;
	renderInputList.value.push(
		...constructInput({
			placeholder,
			disabled,
			raw: false,
		})
	);
};
const close = (idx: number) => {
	if (isDisabled.value) return;
	renderInputList.value = renderInputList.value.filter((_, i) => i !== idx);
	handleChange();
};

const createInputs = (valueList: string[], len: number) => {
	const { maxCount = 5, minCount = 1, strict = false, placeholder, disabled } = props.configure;
	// 新数据条数小于当前展示条数
	if (valueList.length < len) {
		return valueList.push(...Array.from({ length: len - valueList.length }, _ => ""));
	}
	renderInputList.value = [];
	const showValue = valueList.slice(0, maxCount);
	let count = Math.max(minCount, showValue.length);
	if (count >= maxCount) {
		count = maxCount;
	}
	for (let i = 0; i < count; i++) {
		let value = showValue[i];
		renderInputList.value.push(
			...constructInput({
				value,
				placeholder,
				disabled,
				raw: i < (strict ? minCount : count),
			})
		);
	}
};

watch(
	() => props.modelValue,
	newModelValue => {
		const valueList = newModelValue.split(",").filter(e => !!e);
		const len = renderInputList.value.length;
		createInputs(valueList, len);
	},
	{ immediate: true }
);

watch(
	() => props.configure.disabled,
	val => {
		if (val) isDisabled.value = val;
		renderInputList.value.forEach(item => {
			item.disabled = true;
		});
	}
);
</script>

<style lang="scss" scoped>
.input-group {
	@include flex(flex-start, flex-start, column);

	&__item {
		margin-bottom: 10px;
		@include flex(flex-start, center);
	}
}

.ban {
	color: #d4dae6;
	margin-left: 6px;
	cursor: not-allowed;
	@include noCopy();

	&:hover {
		color: #e8ecf2;
	}
}

.add {
	color: #d4dae6;
	margin-left: 6px;
	transition: color 0.3s linear;
	cursor: pointer;
	@include noCopy();

	&:hover {
		color: #1fd1ab;
	}
}

.close {
	color: #d4dae6;
	margin-left: 6px;
	transition: color 0.2s linear;
	cursor: pointer;
	@include noCopy();

	&:hover {
		color: #e53c22;
	}
}
</style>
